Custom classes not being merged correctly in tailwind-merge#71
Open
Custom classes not being merged correctly in tailwind-merge#71
Conversation
Contributor
WalkthroughUpdated Tailwind class merging configuration in Changes
🚥 Pre-merge checks | ✅ 4✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@src/lib/utils.ts`:
- Around line 35-52: The custom color merge map in utils.ts is missing entries
for the button and card color classes, so add "bg-button-primary" and
"bg-button-tertiary" into the "bg-color" group's bg array and add
"text-card-foreground" into the "text-color" group's text array so twMerge will
treat those custom classes as conflicting equivalents; update the bg-color and
text-color definitions (the arrays shown in the diff) to include those string
literals alongside the existing custom names.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
Comment on lines
+35
to
+52
| "bg-color": [ | ||
| { | ||
| bg: [ | ||
| "background", | ||
| "background-blur", | ||
| "red", | ||
| "green", | ||
| "blue-primary", | ||
| "blue-primary-blur", | ||
| "blue-secondary", | ||
| "blue-tertiary", | ||
| "blue-tertiary-blur", | ||
| ], | ||
| }, | ||
| ], | ||
| // custom text colors from figma | ||
| "text-color": [{ text: ["text-primary", "text-secondary", "text-accent-darkbg", "text-accent-lightbg"] }], | ||
| }, |
Contributor
There was a problem hiding this comment.
Custom color merge coverage is still incomplete (Line 35, Line 51).
bg-button-primary / bg-button-tertiary (from src/components/ui/button.tsx) and text-card-foreground (from src/components/card-icon/index.tsx) are not included, so conflicting custom color classes can still survive twMerge. This likely leaves issue #28 partially unresolved.
Suggested patch
"bg-color": [
{
bg: [
"background",
"background-blur",
+ "button-primary",
+ "button-tertiary",
"red",
"green",
+ "grey",
"blue-primary",
"blue-primary-blur",
"blue-secondary",
"blue-tertiary",
"blue-tertiary-blur",
],
},
],
// custom text colors from figma
- "text-color": [{ text: ["text-primary", "text-secondary", "text-accent-darkbg", "text-accent-lightbg"] }],
+ "text-color": [
+ {
+ text: [
+ "text-primary",
+ "text-secondary",
+ "text-accent-darkbg",
+ "text-accent-lightbg",
+ "card-foreground",
+ ],
+ },
+ ],📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| "bg-color": [ | |
| { | |
| bg: [ | |
| "background", | |
| "background-blur", | |
| "red", | |
| "green", | |
| "blue-primary", | |
| "blue-primary-blur", | |
| "blue-secondary", | |
| "blue-tertiary", | |
| "blue-tertiary-blur", | |
| ], | |
| }, | |
| ], | |
| // custom text colors from figma | |
| "text-color": [{ text: ["text-primary", "text-secondary", "text-accent-darkbg", "text-accent-lightbg"] }], | |
| }, | |
| "bg-color": [ | |
| { | |
| bg: [ | |
| "background", | |
| "background-blur", | |
| "button-primary", | |
| "button-tertiary", | |
| "red", | |
| "green", | |
| "grey", | |
| "blue-primary", | |
| "blue-primary-blur", | |
| "blue-secondary", | |
| "blue-tertiary", | |
| "blue-tertiary-blur", | |
| ], | |
| }, | |
| ], | |
| // custom text colors from figma | |
| "text-color": [ | |
| { | |
| text: [ | |
| "text-primary", | |
| "text-secondary", | |
| "text-accent-darkbg", | |
| "text-accent-lightbg", | |
| "card-foreground", | |
| ], | |
| }, | |
| ], |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/lib/utils.ts` around lines 35 - 52, The custom color merge map in
utils.ts is missing entries for the button and card color classes, so add
"bg-button-primary" and "bg-button-tertiary" into the "bg-color" group's bg
array and add "text-card-foreground" into the "text-color" group's text array so
twMerge will treat those custom classes as conflicting equivalents; update the
bg-color and text-color definitions (the arrays shown in the diff) to include
those string literals alongside the existing custom names.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Closes #28